<template>
	<view class="user">
		<view class="user-header flex">
			<template v-if="token">
				<view class="flex">
					<u-avatar :src="userInfo.avatar[0].url" :size="60" @click="toSetting" />
					<view class="user-header-text ml15" @click="toSetting">
						<text class="fs18 mb5">{{ userInfo.userName || '未命名用户' }}</text>
						<text class="fs12">ID:{{ userInfo.phone || ''}}</text>
					</view>
				</view>
				<u-icon name="setting" :size="22" color="#fffff" @click="toSetting" />
			</template>
			<template v-else>
				<view class="flex" @click="toLogin">
					<u-avatar :src="user_avatar" :size="60" />
					<view class="user-header-text ml15">
						<text class="fs18 mb5">未登录</text>
						<text class="fs12">点击登录账号</text>
					</view>
				</view>
			</template>
		</view>
		<view class="user-order ml15 mr15">
			<view class="user-order-header flex" style="justify-content: space-between;">
				<text class="fs12">我的订单</text>
				<view class="flex" style="color: #909399;" @click="toOrder">
					<text class="fs12 mr10">查看全部订单</text>
					<u-icon name="arrow-right" :size="14" />
				</view>
			</view>
			<u-line class="mt10 mb10"></u-line>
			<view class="user-order-status flex">
				<view class="flexColCenter" style="position: relative" @click="toOrder('DFK')">
					<u-icon name="file-text" :size="28" color="#ea64a2" />
					<text class="fs12">待付款</text>
					<u-badge v-if="userInfo" max="99" :value="userInfo.DFK" absolute :offset="[-5, 0]"></u-badge>
				</view>
				<view class="flexColCenter" style="position: relative" @click="toOrder('DFH')">
					<u-icon name="order" :size="28" color="#ea64a2" />
					<text class="fs12">待发货</text>
					<u-badge v-if="userInfo" max="99" :value="userInfo.DFH" absolute :offset="[-5, 0]"></u-badge>
				</view>
				<view class="flexColCenter" style="position: relative" @click="toOrder('DSH')">
					<u-icon name="car" :size="28" color="#ea64a2" />
					<text class="fs12">待收货</text>
					<u-badge v-if="userInfo" max="99" :value="userInfo.DSH" absolute :offset="[-5, 0]"></u-badge>
				</view>
				<view class="flexColCenter" style="position: relative" @click="toOrder('DPJ')">
					<u-icon name="chat" :size="28" color="#ea64a2" />
					<text class="fs12">待评价</text>
					<u-badge v-if="userInfo" max="99" :value="userInfo.DPJ" absolute :offset="[-5, 0]"></u-badge>
				</view>
			</view>
		</view>
		<view class="user-more mt40 ml10 mr10 fs14">更多功能</view>
		<view class="user-menu mt10 ml10 mr10">
			<u-grid :border="true">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" @click="toLink(baseListIndex)">
					<u-icon :customStyle="{paddingBottom: 10+'rpx'}" :name="baseListItem.icon" imgMode="aspectFit" size="56rpx"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<Ctabbar />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import user_avatar from '@/static/image/user_avatar.png'
	export default {
		name: 'User', // 用户页面
		data() {
			return {
				user_avatar: user_avatar,
				baseList: [{
						icon: '/static/user/address.png',
						title: '收货地址',
						url: "/pages/address/index"
					},
					{
						icon: '/static/user/myOrder.png',
						title: '我的订单',
						url: "/pages/order/list/index"
					},
					{
						icon: '/static/user/myEvaluate.png',
						title: '我的评价'
					},
					{
						icon: '/static/user/dialog.png',
						title: '客服对话',
						url: '/pages/dialog/index'
					},
					{
						icon: '/static/user/mySetting.png',
						title: '我的设置',
						url: '/pages/setting/setting'
					},
						{
						icon: '/static/user/loginOut.png',
						title: '退出登录',
						url: "/pages/login/index"
					},
				]
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		// onLoad() {
		// 	console.log('用户页面初始化完成')
		// },
		onShow() {
			// 没有token（未登录）重定向到登录页面
			// uni.navigateTo({ url: '/pages/login/login' })
		},
		methods: {
			// 跳转到我的设置
			toSetting() {
				if (!this.token) { // 未登录进行提示
					this.loginToast()
					return
				}
				uni.navigateTo({
					url: '/pages/setting/setting',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 跳转登录页
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 跳转到对应得订单页
			toOrder(type) {
				if (!this.token) { // 未登录进行提示
					this.loginToast()
					return
				}
				uni.navigateTo({
					url: `/pages/order/list/index?orderStatus=${type || ''}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 跳转对应功能页
			toLink(index) {
				if (!this.token) { // 未登录进行提示
					this.loginToast()
					return
				}
				switch(index) {
					case 3: // 客服对话
				    uni.switchTab({
				    	url: '/pages/dialog/index'
				    })
						break
					case 5: // 退出登录
					  this.$store.dispatch('user/Loginout').then(() => {
				    	uni.navigateTo({
				    	  url: this.baseList[index].url,
				    	  animationType: 'pop-in',
				    	  animationDuration: 200
				      })
				    })
						break
					default:
						uni.navigateTo({
				    	url: this.baseList[index].url,
				    	animationType: 'pop-in',
				    	animationDuration: 200
				    })
						break
				}
			}
		}
	}
</script>

<style lang="scss">
	.user {
		&-header {
			padding: 40rpx 40rpx 150rpx 40rpx;
			background-color: $uni-color-primary;
			justify-content: space-between;
			color: #FFFFFF;

			&-text {
				display: flex;
				flex-direction: column;
			}
		}

		&-order {
			border-radius: 20rpx;
			background-color: #FFFFFF;
			// height: 150rpx;
			margin-top: -75rpx;
			padding: 20rpx 30rpx 40rpx 30rpx;

			&-status {
				color: #606266;
				justify-content: space-between;
			}
		}

		&-more {
			background: #ffffff;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}

		&-menu {
			background: #ffffff;
			border-radius: 10rpx;
			/deep/ .u-grid{
				&-item{
					color: #606266;
					padding: 20rpx 0;
					font-size: 24rpx;
				}
			}
		}

	}
</style>
